<template>
  <div class="home-page">
    <side-bar class="home-page__left" ref="sideBar" />
    <div class="home-page__right" :style="{'left': toLeft, '--animationTIme': animationTime}">
      <header-bar @open-side-bar="openSideBar" />
      <router-view />
    </div>
  </div>
</template>

<script>
import SideBar from "./components/side_bar.vue";
import HeaderBar from "./components/header.vue";
export default {
  namae: "App",

  components: {
    SideBar,
    HeaderBar
  },

  computed: {
    animationTime() {
      return this.$store.state.sideBarAnimationTime;
    },
    toLeft() {
      let { foldMenu, maxSideBarWidth, minSideBarWidth } = this.$store.state;
      return foldMenu ? maxSideBarWidth : minSideBarWidth;
    }
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.updateDevType(); // 默认调用一次

      window.onresize = () => {
        this.updateDevType();
      };
    },

    openSideBar() {
      this.$refs.sideBar.toggleSideBar();
    },

    updateDevType() {
      let { pcMinDevSize, padMinDevSize } = this.$store.getters;
      let type = "";
      let width = window.innerWidth;
      if (width >= pcMinDevSize) {
        type = "pc";
      } else if (width >= padMinDevSize) {
        type = "pad";
      } else {
        type = "mobile";
      }

      this.$store.commit("updateDevType", type);
    }
  }
};
</script>

<style>
.home-page {
  position: relative;
  height: 100%;
  width: 100%;
}

.home-page__right {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 100%;
  padding: 50px;
  transition: left var(--animationTIme);
  box-sizing: border-box;
}

/* 判断手机 */
@media (max-width: 768px) {
  .home-page__right {
    padding: 10px;
    left: 0 !important;
  }
}
</style>